<template>
  <div>
    <div style="height:80px">
      <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-input v-model="map.findid" placeholder="项目编码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="map.findname" placeholder="项目名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select v-model="map.findtpid">
          <el-option label="不限项目类型" value="" selected = true ></el-option>
          <el-option v-for='poty in pojecttypes' :key='poty.besProTypeId' :value='poty.besProTypeId' :label='poty.besProTypeName'></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="selpojectall()">查询</el-button>
      </el-form-item>
      <el-button type="warning" @click="dialog = true">添加体检项目</el-button>
    </el-form>
    </div>
    <div>
      <el-table
      :data="page.rows"
      border
      style="width: 100%">
      <el-table-column
        prop="besProId"
        label="项目编号"
        width="160"
        align="center">
      </el-table-column>
      <el-table-column
        prop="besProName"
        label="项目名称"
        width="250"
        align="center">
      </el-table-column>
      <el-table-column
        prop="bespeakPojectType.besProTypeName"
        label="项目类型"
        width="130"
        align="center">
      </el-table-column>
      <el-table-column
        prop="besProGender"
        label="适用性别"
        width="120"
        align="center">
      </el-table-column>
      <el-table-column
        prop="besProAge"
        label="适用年龄段"
        width="140"
        align="center">
      </el-table-column>
      <el-table-column
        prop="besProPrice"
        label="项目价格"
        width="130"
        align="center">
      </el-table-column>
      <el-table-column
        prop="besProState"
        label="项目状态"
        width="128"
        align="center">
      </el-table-column>
      <el-table-column
        label="操作"
        width="170"
        align="center"
        prop="besProId">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="selpojectone(scope.row.besProId)">编辑</el-button>
          <el-button type="text" size="small" slot="reference" @click="delpoject(scope.row.besProId)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <div class="block">
      <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 9, 15]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="page.total">
        </el-pagination>
    </div>

    <el-dialog
      title="项目信息"
      :visible.sync="dialog"
      width="60%"
      center
      :before-close="clearpoject">
        <el-form :model="poject" :rules="rules" ref="poject" class="demo-ruleForm" inline-message label-width="120px">
            <el-form-item label="项目编号" prop="besProId" hidden>
                <el-input v-model="poject.besProId" style="width: 100%"></el-input>
            </el-form-item>
            <el-form-item label="项目名称" prop="besProName">
                <el-input v-model="poject.besProName" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="适用性别" prop="besProGender">
              <el-select v-model="poject.besProGender" placeholder="请选择适用性别" style="width: 80%" >
              <el-option label="不限" value="不限"></el-option>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="适用年龄段" prop="besProAge">
              <el-col :span="11">
                  <el-input-number v-model="minage" controls-position="right" :min="0"></el-input-number>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                  <el-input-number v-model="maxage" controls-position="right" :min="minage" :max="120"></el-input-number>
              </el-col>
            </el-form-item>
            <el-form-item label="项目类型" prop="besProTypeId">
            <el-select v-model="poject.besProTypeId" filterable placeholder="请选择" style="width: 80%">
              <el-option
                v-for="poty in pojecttypes"
                :key="poty.besProTypeId"
                :label="poty.besProTypeName"
                :value="poty.besProTypeId">
              </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="项目费用类型" prop="besProType">
              <el-select v-model="poject.besProType" placeholder="请选择类型" style="width: 80%" >
              <el-option label="检查费" value="检查费"></el-option>
              <el-option label="放射费" value="放射费"></el-option>
              <el-option label="化验费" value="化验费"></el-option>
              <el-option label="体检中心" value="体检中心"></el-option>
              <el-option label="彩超费" value="彩超费"></el-option>
            </el-select>
            </el-form-item>
                    <el-form-item label="项目正常指标" prop="quota.quotaConsult">
                <el-input v-model="poject.quota.quotaConsult" style="width: 80%"></el-input>
              </el-form-item>
              <el-form-item label="单位" prop="quota.quotaUnit">
                  <el-input v-model="poject.quota.quotaUnit" style="width: 80%"></el-input>
              </el-form-item>
            <el-form-item label="价格" prop="besProPrice">
              <el-input-number v-model="poject.besProPrice" controls-position="right" :min="0" style="width: 80%"></el-input-number>
            </el-form-item>
            <el-form-item label="项目说明" prop="besProDesc">
              <el-input type="textarea" v-model="poject.besProDesc" style="width: 80%"></el-input>
            </el-form-item>
            <el-form-item label="项目状态" prop="besProState">
              <div style="margin-top: 20px">
                <el-radio v-model="poject.besProState" label="0" border size="medium">启用</el-radio>
                <el-radio v-model="poject.besProState" label="1" border size="medium">禁用</el-radio>
              </div>
            </el-form-item>
          </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="clearpoject(poject)">取 消</el-button>
        <el-button type="primary" @click="pojectadd()">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import axios from 'axios'

export default({
  name: 'bespeakProject',
  data () {
    return {
      dialog: false,
      visible: false,
      map: {
        index: '',
        findid: '',
        findname: '',
        findtpid: ''
      },
      page: {},
      currentPage: 1,
      pageSize: 5,
      pojecttypes: [],
      poject: {
        besProId: '',
        besProName: '',
        besProGender: '',
        besProAge: 0,
        besProTypeId: '',
        besProType: '',
        besProPrice: '',
        besProDesc: '',
        besProState: '0',
        quota: {
          quotaConsult: 0,
          quotaUnit: ''
        }
      },
      maxage: 120,
      minage: 0,
      rules: {
        besProName: [
          { required: true, message: '请输入项目名称', trigger: 'blur' }
        ],
        besProGender: [
          { required: true, message: '请选择适用性别', trigger: 'change' }
        ],
        besProType: [
          { required: true, message: '请选择项目费用类型', trigger: 'change' }
        ],
        besProTypeId: [
          { required: true, message: '请选择项目类型', trigger: 'change' }
        ],
        besProPrice: [
          { required: true, message: '请输入项目价格', trigger: 'blur' }
        ],
        besProDesc: [
          { required: true, message: '请输入项目说明', trigger: 'blur' }
        ],
        'quota.quotaConsult': [
          { required: true, message: '请输入项目正常指标', trigger: 'blur' }
        ],
        'quota.quotaUnit': [
          { required: true, message: '请输入项目指标单位', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    selpojectall () {
      this.map.index = this.currentPage
      this.map.pageSize = this.pageSize
      axios.post('/api/poject/selpojectall', this.map).then(result => {
        this.page = result.data
        this.showpostaId()
      })
    },
    selpojectone (id) {
      axios.get('/api/poject/selpojectone/' + id).then(result => {
        this.poject = result.data
        this.minage = parseInt(this.poject.besProAge.substr(0, this.poject.besProAge.indexOf('-')))
        this.maxage = parseInt(this.poject.besProAge.substr(this.poject.besProAge.indexOf('-') + 1))
        this.poject.besProState = this.poject.besProState + ''
        this.dialog = true
      })
    },
    selpojecttypeall () {
      axios.get('/api/poject/selpojecttypeall').then(result => {
        this.pojecttypes = result.data
      })
    },
    showpostaId () {
      this.page.rows.forEach((e, i) => {
        switch (e.besProState) {
          case 0:
            e.besProState = '启用'
            break
          case 1:
            e.besProState = '禁用'
            break
        }
      })
    },
    // 改变页大小
    handleSizeChange (value) {
      this.pageSize = value
      this.selpojectall()
    },
    // 改变当前页码
    handleCurrentChange (value) {
      this.currentPage = value
      this.selpojectall()
    },
    clearpoject (poject) {
      this.$refs.poject.resetFields()
      this.poject = {
        besProId: '',
        besProName: '',
        besProGender: '',
        besProAge: 0,
        besProTypeId: '',
        besProType: '',
        besProPrice: '',
        besProDesc: '',
        besProState: '0',
        quota: {
          quotaConsult: 0,
          quotaUnit: ''
        }
      }
      this.maxage = 120
      this.minage = 0
      this.dialog = false
    },
    pojectadd () {
      this.$refs.poject.validate((valid) => {
        if (valid) {
          this.poject.besProAge = this.minage + '-' + this.maxage
          if (this.poject.besProId === '') {
            axios.post('/api/poject/pojectadd', this.poject).then(result => {
              if (result.data) {
                this.$message({
                  message: '添加项目成功',
                  type: 'success'
                })
              } else {
                this.$message.error('添加失败，请稍后重试')
              }
              this.clearpoject()
              this.selpojectall()
            })
          } else {
            axios.post('/api/poject/pojectupdate', this.poject).then(result => {
              if (result.data) {
                this.$message({
                  message: '编辑项目成功',
                  type: 'success'
                })
              } else {
                this.$message.error('编辑失败，请稍后重试')
              }
              this.clearpoject()
              this.selpojectall()
            })
          }
        }
      })
    },
    delpoject (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('/api/poject/delpoject/' + id).then(result => {
          if (result.data) {
            this.$message({
              message: '删除项目成功',
              type: 'success'
            })
          } else {
            this.$message.error('删除失败，请稍后重试')
          }
          this.selpojectall()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      this.visible = false
    }
  },
  created () {
    this.selpojectall()
    this.selpojecttypeall()
  }
})
</script>

<style scoped>

</style>
